<template>
  <div class="container">
    <!-- 营销模式弹窗 -->
    <div class="marketing-modal" v-if="isMarketingModalShow">
      <div class="modal-header">
        <h3 class="modal-title">营销模式</h3>
        <button class="close-btn" @click="closeMarketingModal">×</button>
      </div>
      <div class="modal-content">
        <!-- 店-人-货 -->
        <div
            class="mode-item"
            :class="{ active: selectedMode === '店-人-货' }"
            @click="selectMarketingMode('店-人-货')"
        >
          <span class="mode-text">店-人-货</span>
        </div>
        <!-- 分割线 -->
        <div class="divider"></div>
        <!-- 店-货-人 -->
        <div
            class="mode-item"
            :class="{ active: selectedMode === '店-货-人' }"
            @click="selectMarketingMode('店-货-人')"
        >
          <span class="mode-text">店-货-人</span>
        </div>
        <!-- 分割线 -->
        <div class="divider"></div>
        <!-- 人-货（带渠道） -->
        <div
            class="mode-item with-channel"
            :class="{ active: selectedMode === '人-货' }"
            @click="selectMarketingMode('人-货')"
        >
          <span class="mode-text">人-货</span>
          <div class="channels">
            <label class="channel-item">
              <input type="checkbox" v-model="channelStates['人-货'].门店" />
              <span class="checkmark" :class="{ checked: channelStates['人-货'].门店 }"></span>
              <span class="channel-text">门店</span>
            </label>
            <label class="channel-item">
              <input type="checkbox" v-model="channelStates['人-货'].商城" />
              <span class="checkmark" :class="{ checked: channelStates['人-货'].商城 }"></span>
              <span class="channel-text">商城</span>
            </label>
          </div>
        </div>
        <!-- 分割线 -->
        <div class="divider"></div>
        <!-- 货-人（带渠道） -->
        <div
            class="mode-item with-channel"
            :class="{ active: selectedMode === '货-人' }"
            @click="selectMarketingMode('货-人')"
        >
          <span class="mode-text">货-人</span>
          <div class="channels">
            <label class="channel-item">
              <input type="checkbox" v-model="channelStates['货-人'].门店" />
              <span class="checkmark" :class="{ checked: channelStates['货-人'].门店 }"></span>
              <span class="channel-text">门店</span>
            </label>
            <label class="channel-item">
              <input type="checkbox" v-model="channelStates['货-人'].商城" />
              <span class="checkmark" :class="{ checked: channelStates['货-人'].商城 }"></span>
              <span class="channel-text">商城</span>
            </label>
          </div>
        </div>
      </div>
    </div>

    <!-- 左侧外层大框 -->
    <div class="left-outer-box">
      <div class="left-inner-top-box">
        <div class="header">
          <div class="title">
            <img src="@/image/dian.png" class="dian" />
            <span class="text_dian">店</span>
            <span class="text_1">-选择门店，圈定人货范围，按店开展营销</span>
          </div>
          <div class="main-area">
            <img src="@/image/icon.png" />
            <span>主要区域：广州</span>
          </div>
          <div class="circle-btn-box">
            <button class="circle-btn" @click="showMarketingModal">圈选店人货</button> <!-- 新增点击事件 -->
          </div>
        </div>
        <div class="statistics">
          <div class="stat-item">
            <label>已选门店</label>
            <span>{{ selectedStores }}</span>
          </div>
          <div class="stat-item">
            <label>活跃会员数</label>
            <span>{{ activeMembers }}</span>
          </div>
          <div class="stat-item">
            <label>平均月销售额</label>
            <span>¥{{ averageMonthlySales }}</span>
          </div>
          <div class="stat-item">
            <label>平均售罄率</label>
            <span>{{ averageSellThroughRate }}</span>
          </div>
          <div class="stat-item">
            <label>客单价</label>
            <span>¥{{ averageTransactionValue }}</span>
          </div>

        </div>
        <button class="import-btn">导入门店</button>
      </div>
      <div class="left-inner-bottom-box">
        <!-- 根据isSwitched状态决定显示zuo还是you -->
        <div v-if="!isSwitched" class="zuo">
          <div class="goods-header">
            <img src="@/image/huo.png" class="huo-img" />
            <span class="huo_zi">货</span>
            <span class="huo">-限定卖货范围</span>
          </div>
          <span class="text_shang">选择商品分组</span>
          <div class="product-group">
            <span>2023春夏货款库存充足 ></span>
          </div>
          <div class="arrow-container">
            <img src="@/image/double%20arrow.png" />
          </div>
          <div class="stats-container">
            <div class="stat-row">
              <div class="stat-column">
                <label>货款</label>
              </div>
              <div class="stat-column">
                <label>库存</label>
              </div>
              <div class="stat-column">
                <label>库龄</label>
              </div>
              <div class="stat-column">
                <label>售完率</label>
              </div>
            </div>
            <div class="stat-row">
              <div class="stat-column">
                <span>834</span>
              </div>
              <div class="stat-column">
                <span>29,234</span>
              </div>
              <div class="stat-column">
                <span>3年</span>
              </div>
              <div class="stat-column">
                <span>60%</span>
              </div>
            </div>
          </div>
          <div class="stats-container">
            <div class="stat-row">
              <div class="stat-column">
                <label>主要商品</label>
              </div>
              <div class="stat-column">
                <label>价格带</label>
              </div>
              <div class="stat-column">
                <label>折扣率</label>
              </div>
              <div class="stat-column">
                <label>销售状态</label>
              </div>
            </div>
            <div class="stat-row">
              <div class="stat-column">
                <span>T恤</span>
              </div>
              <div class="stat-column">
                <span>¥1000-3000</span>
              </div>
              <div class="stat-column">
                <span>60%</span>
              </div>
              <div class="stat-column">
                <span>畅销</span>
              </div>
            </div>
          </div>
          <div class="button-container">
            <button class="action-btn orange">商品明细</button>
          </div>
        </div>
        <!-- 根据isSwitched状态决定显示you还是zuo -->
        <div v-else class="zuo">
          <!-- 根据memberSelection决定显示AI选还是自选内容 -->
          <div v-if="memberSelection === 'ai'">
            <div class="member-header">
              <img src="@/image/ren.png" class="ren-img" />
              <span class="ren_zi">人</span>
              <span class="ren">-明确营销对象</span>
            </div>
            <div class="member-content-wrapper">
              <div class="member-group-info">
                <span class="text_people">选择会员分组</span>
                <div class="member-group">
                  <span>2月正价核心会员群 ></span>
                </div>
              </div>
              <!-- 单选框区域 - 垂直排列靠右 -->
              <div class="member-selection vertical right-align">
                <label class="radio-label">
                  <input type="radio" value="ai" v-model="memberSelection" class="member-radio" />
                  <span>AI选</span>
                </label>
                <label class="radio-label">
                  <input
                      type="radio"
                      value="manual"
                      v-model="memberSelection"
                      class="member-radio"
                      @change="handleManualSelect"
                  />
                  <span>自选</span>
                </label>
              </div>
            </div>
            <div class="arrow-container">
              <img src="@/image/double%20arrow.png" />
            </div>
            <div class="stats-container">
              <div class="stat-row">
                <div class="stat-column">
                  <label>分组会员</label>
                </div>
                <div class="stat-column">
                  <label>开卡率</label>
                </div>
                <div class="stat-column">
                  <label>主类型</label>
                </div>
                <div class="stat-column">
                  <label>年龄段</label>
                </div>
              </div>
              <div class="stat-row">
                <div class="stat-column">
                  <span>9,213</span>
                </div>
                <div class="stat-column">
                  <span>34%</span>
                </div>
                <div class="stat-column">
                  <span>老会员</span>
                </div>
                <div class="stat-column">
                  <span>30-50</span>
                </div>
              </div>
            </div>
            <div class="stats-container">
              <div class="stat-row">
                <div class="stat-column">
                  <label>库</label>
                </div>
                <div class="stat-column">
                  <label>RFM</label>
                </div>
                <div class="stat-column">
                  <label>平均折扣</label>
                </div>
                <div class="stat-column">
                  <label>客单价</label>
                </div>
              </div>
              <div class="stat-row">
                <div class="stat-column">
                  <span>12%</span>
                </div>
                <div class="stat-column">
                  <span>重要发展</span>
                </div>
                <div class="stat-column">
                  <span>87%</span>
                </div>
                <div class="stat-column">
                  <span>¥1213.9</span>
                </div>
              </div>
            </div>
            <div class="button-container">
              <button class="action-btn green">指标洞察</button>
              <button class="action-btn orange">会员分析</button>
            </div>
          </div>
          <div v-else>
            <!-- 自选时显示的内容 -->
            <div class="manual-selection">
              <div class="member-header">
                <img src="@/image/ren.png" class="ren-img" />
                <span class="ren_zi">人</span>
                <span class="ren">-明确营销对象</span>
              </div>
              <div class="member-content-wrapper">
                <div class="member-group-info">
                  <span class="text_people">选择会员分组</span>
                  <div class="member-group">
                    <span>2月正价核心会员群 ></span>
                  </div>
                </div>
                <!-- 单选框区域 - 垂直排列靠右 -->
                <div class="member-selection vertical right-align">
                  <label class="radio-label">
                    <input type="radio" value="ai" v-model="memberSelection" class="member-radio" />
                    <span>AI选</span>
                  </label>
                  <label class="radio-label">
                    <input
                        type="radio"
                        value="manual"
                        v-model="memberSelection"
                        class="member-radio"
                        @change="handleManualSelect"
                    />
                    <span>自选</span>
                  </label>
                </div>
              </div>
              <img src="@/image/image.png.png" alt="自选提示图" class="manual-img" />
              <p class="manual-tip">点击右方匹配按钮，立即生成方案~</p>
            </div>
          </div>
        </div>
        <!-- 中间切换图标（顶层） -->
        <div class="switch-icon-container" @click="toggleSwitch">
          <img src="@/image/qiehuan.png" alt="切换按钮" class="switch-icon" />
        </div>
        <!-- 根据isSwitched状态决定显示you还是zuo -->
        <div v-if="!isSwitched" class="you">
          <!-- 根据memberSelection决定显示AI选还是自选内容 -->
          <div v-if="memberSelection === 'ai'">
            <div class="member-header">
              <img src="@/image/ren.png" class="ren-img" />
              <span class="ren_zi">人</span>
              <span class="ren">-明确营销对象</span>
            </div>
            <div class="member-content-wrapper">
              <div class="member-group-info">
                <span class="text_people">选择会员分组</span>
                <div class="member-group">
                  <span>2月正价核心会员群 ></span>
                </div>
              </div>
              <!-- 单选框区域 - 垂直排列靠右 -->
              <div class="member-selection vertical right-align">
                <label class="radio-label">
                  <input type="radio" value="ai" v-model="memberSelection" class="member-radio" />
                  <span>AI选</span>
                </label>
                <label class="radio-label">
                  <input
                      type="radio"
                      value="manual"
                      v-model="memberSelection"
                      class="member-radio"
                      @change="handleManualSelect"
                  />
                  <span>自选</span>
                </label>
              </div>
            </div>
            <div class="arrow-container">
              <img src="@/image/double%20arrow.png" />
            </div>
            <div class="stats-container">
              <div class="stat-row">
                <div class="stat-column">
                  <label>分组会员</label>
                </div>
                <div class="stat-column">
                  <label>开卡率</label>
                </div>
                <div class="stat-column">
                  <label>主类型</label>
                </div>
                <div class="stat-column">
                  <label>年龄段</label>
                </div>
              </div>
              <div class="stat-row">
                <div class="stat-column">
                  <span>213</span>
                </div>
                <div class="stat-column">
                  <span>34%</span>
                </div>
                <div class="stat-column">
                  <span>老会员</span>
                </div>
                <div class="stat-column">
                  <span>30-50</span>
                </div>
              </div>
            </div>
            <div class="stats-container">
              <div class="stat-row">
                <div class="stat-column">
                  <label>库</label>
                </div>
                <div class="stat-column">
                  <label>RFM</label>
                </div>
                <div class="stat-column">
                  <label>平均折扣</label>
                </div>
                <div class="stat-column">
                  <label>客单价</label>
                </div>
              </div>
              <div class="stat-row">
                <div class="stat-column">
                  <span>%</span>
                </div>
                <div class="stat-column">
                  <span>重要发展</span>
                </div>
                <div class="stat-column">
                  <span>87%</span>
                </div>
                <div class="stat-column">
                  <span>¥1213.9</span>
                </div>
              </div>
            </div>
            <div class="button-container">
              <button class="action-btn green">指标洞察</button>
              <button class="action-btn orange">会员分析</button>
            </div>
          </div>
          <div v-else>
            <!-- 自选时显示的内容 -->
            <div class="manual-selection">
              <div class="member-header">
                <img src="@/image/ren.png" class="ren-img" />
                <span class="ren_zi">人</span>
                <span class="ren">-明确营销对象</span>
              </div>
              <div class="member-content-wrapper">
<!--                <div class="member-group-info">-->
<!--                  <span class="text_people">选择会员分组</span>-->
<!--                  <div class="member-group">-->
<!--                    <span>2月正价核心会员群 ></span>-->
<!--                  </div>-->
<!--                </div>-->
                <!-- 单选框区域 - 垂直排列靠右 -->
                <div class="member-selection vertical right-align">
                  <label class="radio-label">
                    <input type="radio" value="ai" v-model="memberSelection" class="member-radio" />
                    <span>AI选</span>
                  </label>
                  <label class="radio-label">
                    <input
                        type="radio"
                        value="manual"
                        v-model="memberSelection"
                        class="member-radio"
                        @change="handleManualSelect"
                    />
                    <span>自选</span>
                  </label>
                </div>
              </div>
              <img src="@/image/image.png.png" alt="自选提示图" class="manual-img" />
              <p class="manual-tip">点击右方匹配按钮，立即生成方案~</p>
            </div>
          </div>
        </div>
        <!-- 根据isSwitched状态决定显示zuo还是you -->
        <div v-else class="you">
          <div class="goods-header">
            <img src="@/image/huo.png" class="huo-img" />
            <span class="huo_zi">货</span>
            <span class="huo">-限定卖货范围</span>
          </div>
          <span class="text_shang">选择商品分组</span>
          <div class="product-group">
            <span>2023春夏货款库存充足 ></span>
          </div>
          <div class="arrow-container">
            <img src="@/image/double%20arrow.png" />
          </div>
          <div class="stats-container">
            <div class="stat-row">
              <div class="stat-column">
                <label>货款</label>
              </div>
              <div class="stat-column">
                <label>库存</label>
              </div>
              <div class="stat-column">
                <label>库龄</label>
              </div>
              <div class="stat-column">
                <label>售完率</label>
              </div>
            </div>
            <div class="stat-row">
              <div class="stat-column">
                <span>834</span>
              </div>
              <div class="stat-column">
                <span>29,234</span>
              </div>
              <div class="stat-column">
                <span>3年</span>
              </div>
              <div class="stat-column">
                <span>60%</span>
              </div>
            </div>
          </div>
          <div class="stats-container">
            <div class="stat-row">
              <div class="stat-column">
                <label>主要商品</label>
              </div>
              <div class="stat-column">
                <label>价格带</label>
              </div>
              <div class="stat-column">
                <label>折扣率</label>
              </div>
              <div class="stat-column">
                <label>销售状态</label>
              </div>
            </div>
            <div class="stat-row">
              <div class="stat-column">
                <span>T恤</span>
              </div>
              <div class="stat-column">
                <span>¥1000-3000</span>
              </div>
              <div class="stat-column">
                <span>60%</span>
              </div>
              <div class="stat-column">
                <span>畅销</span>
              </div>
            </div>
          </div>
          <div class="button-container">
            <button class="action-btn orange">商品明细</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间匹配按钮 -->
    <div class="btn-box">
      <div class="match-btn" @click="handleMatchClick">
        <div class="btn-wrapper">
          <img :src="currentMatchImage" alt="匹配按钮" class="btn-image" />
        </div>
      </div>
    </div>
    <!-- 右侧区域 -->
    <div class="right-column">
      <!-- AI匹配模块 -->
      <div class="ai-match-box">
        <div class="ai-header">
          <span class="ai-title">AI匹配 - 智能生成匹配方案</span>
          <button class="store-recommend-btn">按店推荐</button>
        </div>
        <div class="ai-content">
          <!-- 算法及推荐信息 -->
          <div class="ai-info">
            <div class="ai-item">
              <img src="@/image/icon_tuijian.png" class="check-icon" />
              <span>已使用{{ aiMatch.algorithm }}算法为{{ aiMatch.storeCount }}家门店生成人货匹配方案</span>

              <div class="algorithm-selector">
                <button class="change-algorithm" @click.stop="toggleAlgorithmDropdown">
                  更换算法 ▼
                </button>
                <div class="algorithm-dropdown" v-if="showAlgorithmDropdown">
                  <div
                      class="dropdown-item"
                      v-for="algo in algorithms"
                      :key="algo"
                      @click.stop="selectAlgorithm(algo)"
                  >
                    {{ algo }}
                  </div>
                </div>
              </div>

            </div>
            <div class="ai-item">
              <img src="@/image/icon_tuijian.png" class="check-icon" />
              <span>推荐{{ aiMatch.product.count }}款商品 ({{ aiMatch.product.stock }}件库存)</span>
              <span>推荐{{ aiMatch.people }}人</span>
            </div>
          </div>
          <!-- 商品类型 & 人群分层统计 -->
          <div class="ai-stats">
            <div class="stats-group">
              <div class="stat-item">
                <label>畅销</label>
                <span>{{ aiMatch.productType.畅销 }}</span>
              </div>
              <div class="stat-item">
                <label>滞销</label>
                <span>{{ aiMatch.productType.滞销 }}</span>
              </div>
              <div class="stat-item">
                <label>平销</label>
                <span>{{ aiMatch.productType.平销 }}</span>
              </div>
            </div>
            <div class="stats-group">
              <div class="stat-item">
                <label>重要价值</label>
                <span>{{ aiMatch.peopleType.重要价值 }}</span>
              </div>
              <div class="stat-item">
                <label>重要挽留</label>
                <span>{{ aiMatch.peopleType.重要挽留 }}</span>
              </div>
              <div class="stat-item">
                <label>一般价值</label>
                <span>{{ aiMatch.peopleType.一般价值 }}</span>
              </div>
              <div class="stat-item">
                <label>一般挽留</label>
                <span>{{ aiMatch.peopleType.一般挽留 }}</span>
              </div>
            </div>
          </div>
          <button class="view-detail-btn">查看方案明细</button>
        </div>
      </div>

      <!-- 场（营销活动） & 触达模块 -->
      <div class="market-reach-box">
        <!-- 营销活动配置（场） -->
        <div class="market-box">
          <div class="market-header">
            <img src="@/image/img.png" class="market-icon" alt="场图标">
            <span class="market-title">场</span>
            <span class="market-title2">- 营销活动配置</span>
            <span class="precision-tag">精准营销</span>
          </div>
          <div class="market-tabs">
            <span class="tab active" @click="selectMarketTab('活动')">活动</span>
            <span class="tab" @click="selectMarketTab('互动')">互动</span>
            <span class="tab" @click="selectMarketTab('内容')">内容</span>
          </div>
          <div class="market-content">
            <div class="activity-icons">
              <div class="icon-item" @click="selectActivity('权益')">
                <img src="@/image/quanyi.png" alt="权益" />
                <span>权益</span>
              </div>
              <div class="icon-item" @click="selectActivity('优惠券')">
                <img src="@/image/youhuijuan.png" alt="优惠券" />
                <span>优惠券</span>
              </div>
              <div class="icon-item" @click="selectActivity('促销')">
                <img src="@/image/chuxiao.png" alt="促销" />
                <span>促销</span>
              </div>
              <div class="icon-item" @click="selectActivity('常态化')">
                <img src="@/image/changtaihua.png" alt="常态化" />
                <span>常态化</span>
              </div>
              <div class="icon-item" @click="selectActivity('引流到店')">
                <img src="@/image/yingliudaodian.png" alt="引流到店" />
                <span>引流到店</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 触达（多点触达） -->
        <div class="reach-box">
          <div class="reach-header">
            <img src="@/image/img_1.png" class="market-icon1" alt="触点图标">
            <span class="reach-title">触达 </span>
            <span class="reach-title1">- 多点触达提高转化率</span>
          </div>
          <div class="reach-icons">
            <div class="icon-item" @click="selectReach('导购任务')">
              <img src="@/image/daogourenwu.png" alt="导购任务" />
              <span>导购任务</span>
            </div>
            <div class="icon-item" @click="selectReach('企微群发')">
              <img src="@/image/qiyequnfa.png" alt="企微群发" />
              <span>企微群发</span>
            </div>
            <div class="icon-item" @click="selectReach('订阅消息')">
              <img src="@/image/dingyuexiaoxi.png" alt="订阅消息" />
              <span>订阅消息</span>
            </div>
            <div class="icon-item" @click="selectReach('短信')">
              <img src="@/image/duanxin.png" alt="短信" />
              <span>短信</span>
            </div>
            <div class="icon-item" @click="selectReach('智能触达')">
              <img src="@/image/zhinengchuda.png" alt="智能触达" />
              <span>智能触达</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 左侧数据
const selectedStores = ref(23);
const activeMembers = ref('232,300');
const averageMonthlySales = ref('222,423');
const averageSellThroughRate = ref('45%');
const averageTransactionValue = ref('34,544');

// 控制左右区域是否交换的状态
const isSwitched = ref(false);
// 会员选择方式，默认AI选
const memberSelection = ref('ai');

//  算法切换
const showAlgorithmDropdown = ref(false)
const algorithms = ['UCF-从人找人再找货', 'UCF-从货找人再找货', '从标签找标签'] // 可选的算法列表
const toggleAlgorithmDropdown = () => {
  showAlgorithmDropdown.value = !showAlgorithmDropdown.value
}
const selectAlgorithm = (algorithm) => {
  aiMatch.value.algorithm = algorithm
  showAlgorithmDropdown.value = false
}



// 右侧AI匹配数据
const aiMatch = ref({
  algorithm: 'ICF', // 算法类型
  storeCount: 23, // 门店数
  product: { count: 38, stock: 1344 }, // 商品数 & 库存
  people: 6921, // 推荐人数
  productType: { 畅销: 12, 滞销: 5, 平销: 15 }, // 商品类型统计
  peopleType: {
    // 人群分层统计
    重要价值: 1300,
    重要挽留: 1800,
    一般价值: 2000,
    一般挽留: 821,
  },
});

// 右侧营销活动选择
const selectedMarketTab = ref('活动');
const selectedActivity = ref('');
const selectedReach = ref('');

// 营销模式弹窗相关
const isMarketingModalShow = ref(false);
const selectedMode = ref('人-货'); // 默认选中人-货
const channelStates = reactive({
  '人-货': { 门店: true, 商城: false },
  '货-人': { 门店: false, 商城: false },
});

// 匹配按钮图片状态管理
import pipeiImg from '@/image/pipei.png'
import jiazaiImg from '@/image/jiazai.png'
import wanchengImg from '@/image/wancheng.png'

const currentMatchImage = ref(pipeiImg)
const MATCH_IMAGES = {
  idle: pipeiImg,
  loading: jiazaiImg,
  success: wanchengImg
}

// 切换左右区域的函数
const toggleSwitch = () => {
  isSwitched.value = !isSwitched.value;
};

// 处理自选选择（移除弹窗逻辑）
const handleManualSelect = () => {
  // 仅保留会员选择逻辑，移除弹窗显示逻辑
  console.log('会员选择方式已切换为自选');
};

// 选择营销模式
const selectMarketingMode = (mode) => {
  selectedMode.value = mode;
  // 重置其他模式的渠道选择
  if (mode !== '人-货') {
    channelStates['人-货'] = { 门店: false, 商城: false };
  }
  if (mode !== '货-人') {
    channelStates['货-人'] = { 门店: false, 商城: false };
  }
};

// 关闭营销模式弹窗
const closeMarketingModal = () => {
  isMarketingModalShow.value = false;
  // 这里可以添加提交选择的逻辑
  console.log('选中的营销模式:', selectedMode.value);
  console.log('渠道选择:', channelStates[selectedMode.value]);
};

// 新增：点击"圈选店人货"按钮显示营销模式弹窗
const showMarketingModal = () => {
  isMarketingModalShow.value = true;
  console.log('通过"圈选店人货"按钮打开营销模式选择');
};

// 营销活动标签切换
const selectMarketTab = (tab) => {
  selectedMarketTab.value = tab;
};

// 选择营销活动类型
const selectActivity = (type) => {
  selectedActivity.value = type;
  console.log('Selected activity:', type);
};

// 选择触达方式
const selectReach = (type) => {
  selectedReach.value = type;
  console.log('Selected reach method:', type);
};

// 匹配按钮点击处理（最终定格为完成状态）
const handleMatchClick = () => {
  // 切换为加载状态
  currentMatchImage.value = MATCH_IMAGES.loading;

  setTimeout(() => {
    // 切换为完成状态（移除自动恢复初始状态的代码）
    currentMatchImage.value = MATCH_IMAGES.success;

    // 调用生成方案逻辑
    generatePlan();
  }, 500);
};

// 生成匹配方案
const generatePlan = () => {
  console.log('Generating plan with:', {
    selectedStores: selectedStores.value,
    memberSelection: memberSelection.value,
    marketingMode: selectedMode.value,
    channels: channelStates[selectedMode.value],
  });
  // 这里可以添加实际的匹配逻辑
};
</script>

<style scoped>
/* 全局盒模型与基础布局 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
.container {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border: 2px solid white;
  height: 100vh;
  background: #E8EDFF;
  position: relative;
  overflow: hidden;
}
/* 左右区域精确50%宽度 */
.left-outer-box,
.right-column {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.left-outer-box {
  background-color: white;
  padding: 15px;
  border-right: 2px solid white;
}
.right-column {
  background-color: white;
  padding: 15px;
  border-left: 2px solid white;
}
/* 左侧内部区域 */
.left-inner-top-box,
.left-inner-bottom-box {
  border: 2px solid #E8EDFF;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.left-inner-top-box {
  height: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
}
.left-inner-bottom-box {
  height: 65%;
  display: flex;
  flex-direction: row;
  position: relative;
}
.zuo,
.you {
  flex: 1;
  padding: 20px;
  position: relative;
  z-index: 1;
}
/* 中间切换图标样式（顶层） */
.switch-icon-container {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.switch-icon-container:hover {
  transform: translate(-50%, -50%) scale(1.1);
}
.switch-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.you {
  border-left: 1px dashed #E8EDFF;
}
/* 标题区域样式 */
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.title {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.text_1 {
  background: linear-gradient(to bottom, white 50%, #E8EDFF 50%);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #E8EDFF;
  font-size: 12px;
  margin-left: 8px;
}
.dian {
  width: 22px;
  height: 22px;
  margin-right: 6px;
}
.text_dian {
  font-weight: bold;
  font-size: 14px;
}
.circle-btn-box {
  position: relative;
}
.main-area {
  display: flex;
  align-items: center;
  font-size: 8px;
  margin-left: 20px;
}
.circle-btn {
  background-color: #7087FA;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
}
/* 统计区域样式 */
.statistics {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 40px;
  padding: 10px;
  background-color: #fff;
  border: none;
  margin-left: -100px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 100px; /* 最小宽度 */
  padding: 10px;
  border: none;


}

.stat-item label {
  font-size: 20px;
  color: #606975;
  margin-bottom: 6px;
}

.stat-item span {
  font-size: 24px;
  font-weight: bold;
  color: #0A1F37;
}

.import-btn {
  margin-top: -121px;
  margin-left: 560px;
  background-color: white;
  color: #fbbf24;
  border: 1px solid #fbbf24;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 11px;
}

/** 货相关样式 **/
.goods-header,
.member-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.huo-img,
.ren-img {
  width: 28px;
  height: 28px;
}
.huo_zi,
.ren_zi {
  font-size: 28px !important;
  font-weight: bold;
  line-height: 1;
}
.huo,
.ren {
  font-size: 14px;
  color: #606975;
}
.text_shang,
.text_people {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin: 15px 0 8px;
}
.product-group,
.member-group {
  background: #F8FAFC; /* 浅灰背景 */
  border: 1px solid #E8EDFF; /* 更浅的边框色 */
  padding: 6px 12px;
  border-radius: 6px; /* 圆角更柔和 */
  font-size: 12px;
  margin-bottom: 15px;
}
.arrow-container {
  text-align: center;
  margin: 15px 0;
}
.arrow-container img {
  width: 30px;
  height: 30px;
}
/* 数据统计区域 */
.stats-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-top: 20px;
}
.stat-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.stat-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}
.stat-column label {
  font-size: 12px;
  color: #606975;
  margin-bottom: 4px;
}
.stat-column span {
  font-size: 16px;
  font-weight: bold;
  color: #0A1F37;
}
/* 按钮区域 */
.button-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.action-btn {
  flex: 1;
  min-width: 120px;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.action-btn.orange {
  background-color: rgba(252, 151, 73, 1);
  color: white;
}
.action-btn.green {
  background-color: rgba(37, 207, 130, 1);
  color: white;
}
/* 中间匹配按钮 */
.btn-box {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  z-index: 20;
}
.match-btn {
  cursor: pointer;
}
.btn-wrapper {
  position: relative;
  display: inline-block;
}
.btn-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: contain;
  border: 3px solid #E8EDFF;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.match-btn:hover .btn-image {
  transform: scale(1.05);
}
/* 右侧区域 */
.right-outer-top-box,
.right-outer-bottom-box {
  border-radius: 8px;
  overflow: hidden;
}
.right-outer-top-box {
  flex: 1;
  background-color: white;
  border: 2px solid #E8EDFF;
  margin-bottom: 15px;
}
.right-outer-bottom-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.right-inner-top-box,
.right-inner-bottom-box {
  border: 2px solid #E8EDFF;
  border-radius: 8px;
  flex: 1;
}
.manual-img {
  height: 150px;
}


.algorithm-selector {
  position: relative;
  display: inline-block;
  margin-left: auto;
}

.change-algorithm {
  background: none;
  border: none;
  color: #FA9B49;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
}

.algorithm-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #E8EDFF;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 100;
  min-width: 120px;
}

.dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
}

.dropdown-item:hover {
  background-color: #F8FAFC;
}

/* 会员选择区域样式 */
.member-content-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin-bottom: 15px;
}
.member-group-info {
  flex: 1;
}
/* 单选框样式 */
.member-selection {
  padding: 8px;
  border-radius: 4px;
  background-color: #F8FAFC;
}



/* 垂直排列样式 */
.member-selection.vertical {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}


/* 或者更明确的解决方案： */
.member-selection.vertical.right-align {
  margin-left: auto; /* 强制右对齐 */
}
.radio-label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;
}
.member-radio {
  margin-right: 6px;
}
.radio-label span {
  font-size: 12px;
}
/* 自选内容样式 */
.manual-selection {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.manual-selection .member-content-wrapper {
  margin-bottom: 30px;
}
.manual-img {
  max-width: 50%;
  height: auto;
  margin: 20px auto;
  border-radius: 8px;
}
.manual-tip {
  font-size: 16px;
  color: #334155;
  font-weight: 500;
  text-align: center;
  margin-top: 20px;
}

/* AI匹配模块 */
.ai-match-box {
  border: 2px solid #E8EDFF;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}
.ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.ai-title {
  font-size: 16px;
  font-weight: bold;
  color: #0A1F37;
}
.store-recommend-btn {
  background: #7087FA;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.ai-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.check-icon {
  width: 16px;
  height: 16px;
}
.change-algorithm {
  margin-left: auto;
  background: none;
  border: none;
  color: #FA9B49; /* 橙色，匹配设计图 */
  cursor: pointer;
  font-size: 12px;
  text-decoration: none; /* 去掉下划线 */
}
/* 若需要箭头，可通过伪元素添加：*/
.change-algorithm::after {
  content: "▼";
  font-size: 10px;
  margin-left: 4px;
}
.ai-stats {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0;
}
.stats-group {
  display: flex;
  gap: 20px;
}
.ai-stats .stat-item {
  min-width: 60px;
}
.ai-stats .stat-item label {
  font-size: 10px;
}
.ai-stats .stat-item span {
  font-size: 12px;
}
.view-detail-btn {
  align-self: flex-end;
  background: #FA9B49;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* 场 & 触达模块容器 */
.market-reach-box {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 营销活动配置（场） */
.market-box {
  border: 2px solid #E8EDFF;
  border-radius: 8px;
  padding: 15px;
  flex: 1;

}
.market-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.market-icon {
  width: 32px; /* 根据实际需求设置宽度 */
  height: 32px; /* 根据实际需求设置高度 */
  margin-right: 8px; /* 与文字保持间距 */
}

.market-icon1 {
  width: 32px; /* 根据实际需求设置宽度 */
  height: 32px; /* 根据实际需求设置高度 */
  margin-right: 8px; /* 与文字保持间距 */
}



.market-title {
  font-size: 28px;
  font-weight: bold;
  color: #0A1F37;
  margin-left: -415px;
}

.market-title2{
  font-size: 16px;
  font-weight: 400;
  color: #0A1F37;
  margin-left: -400px;
}


.precision-tag {
  background: #7087FA;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.market-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  /* 新增，让子元素水平居中 */
  justify-content: center;
}
.tab {
  font-size: 14px;
  color: #606975;
  cursor: pointer;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.tab.active {
  color: #0A1F37;
  font-weight: bold;
  border-bottom: 2px solid #7087FA;
}
.activity-icons {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 触达模块 */
.reach-box {
  border: 2px solid #E8EDFF;
  border-radius: 8px;
  padding: 15px;
  flex: 1;
}
.reach-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;

}

.reach-title {
  font-size: 28px;
  font-weight: bold;
  color: #0A1F37;
  position: relative;
  margin-left: -400px;
}


.reach-title1 {
  font-size: 16px;
  font-weight: 400;
  color: #0A1F37;
  position: relative;
  right: 400px;
}


.reach-icons {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 图标通用样式 */
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.icon-item img {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}
.icon-item span {
  font-size: 12px;
  color: #334155;
}

/* 营销模式弹窗样式 */
.marketing-modal {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  width: 360px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transform-origin: center center;
}
@media (max-width: 768px) {
  .marketing-modal {
    font-size: 80%;
  }
}
.marketing-modal {
  width: min(360px, 90vw);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #E8EDFF;
  position: relative;
}
.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  transform: translateX(188%);
}
.close-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
}
.close-btn:hover {
  color: #666;
}
.modal-content {
  padding: 20px;
}
.mode-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  cursor: pointer;
  color: #666;
  transition: background 0.2s;
}
.mode-item:hover {
  background: #f8f9fd;
}
.mode-item.active {
  color: #409eff;
}
.mode-text {
  font-size: 14px;
}
.divider {
  height: 1px;
  background: #eee;
  margin: 8px 0;
}
.mode-item.with-channel {
  justify-content: flex-start;
  gap: 10px;
}
.channels {
  display: flex;
  gap: 16px;
}
.channel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.channel-item input[type="checkbox"] {
  display: none;
}
.checkmark {
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
  border-radius: 3px;
  display: inline-block;
  position: relative;
}
.checkmark.checked {
  background-color: #409eff;
  border-color: #409eff;
}
.checkmark.checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.channel-text {
  font-size: 14px;
  color: #666;
}
</style>